Optimiser les SVG avec une feuille de sprites
{% contentBlock %} En tant que développeur web durable, je m'efforce de réduire la taille des fichiers que j'envoie aux utilisateurs. Cela passe par l'utilisation de formats d'images adaptés, la compression des fichiers, l'utilisation de CDN, etc. Suite à la lecture de l'article [How I build my SVG sprites](https://nicolas-hoizey.com/articles/2020/10/15/how-i-build-my-svg-sprites/) de [Nicolas Hoizey](https://nicolas-hoizey.com/), j'ai décidé de me pencher sur la question de l'optimisation des SVG. {% endcontentBlock %} {% contentBlock %} ## Pourquoi optimiser les SVG ? Les SVG sont des fichiers XML qui peuvent être compressés. Il est donc possible de réduire leur taille en utilisant un algorithme de compression. Cependant, les navigateurs ne sont pas tous capables de décompresser les fichiers SVG compressés. Il est donc nécessaire de décompresser les fichiers avant de les envoyer aux utilisateurs. {% endcontentBlock %} ## Comment optimiser les SVG ? ### Réduire le nombre de points Les SVG sont composés de points reliés entre eux par des lignes. Plus il y a de points, plus le fichier est lourd. Il est donc important de réduire le nombre de points. Mais dans cet article, je vais me concentrer sur la réduction de la taille des fichiers SVG en utilisant une feuille de sprites. ### Regrouper les fichiers SVG Pour réduire le nombre de requêtes, il est possible de regrouper plusieurs fichiers SVG en un seul. Cela permet de réduire le nombre de requêtes et donc d'améliorer les performances. ### Implémentation avec Eleventy Puisque ce site est généré avec [Eleventy](https://www.11ty.dev/), je vais utiliser cet outil pour générer ma feuille de sprites. #### Installation des dépendances Pour générer la feuille de sprites, j'utilise le plugin [eleventy-plugin-svg-sprite](https://github.com/patrickxchong/eleventy-plugin-svg-sprite/). Pour l'installer, j'utilise la commande suivante : ```bash npm install eleventy-plugin-svg-sprite --save-dev ``` #### Configuration du plugin Pour configurer le plugin, j'ajoute le code suivant dans mon fichier `eleventy.config.js` : ```js import pluginSvgSprite from "eleventy-plugin-svg-sprite"; export default function (eleventyConfig) { eleventyConfig.addPlugin(pluginSvgSprite, { path: "./assets/svg" }); } ``` > Le dossier `assets/svg` contient les fichiers SVG à regrouper. Pour éviter une requête réseau pour récuper le fichier `svg-sprite.svg`, j'ajoute le contenu du fichier directement dans le code HTML. {% raw %} ```liquid {% include "components/head.edge" %} {% svgsprite %} {% include "components/header.edge" %}